<style type="text/css">
    .sm-st {
        background: #fff;
        padding: 20px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin-bottom: 20px;
    }

    .sm-st-icon {
        width: 60px;
        height: 60px;
        display: inline-block;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
        background: #eee;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        float: left;
        margin-right: 10px;
        color: #fff;
    }

    .sm-st-info {
        padding-top: 2px;
    }

    .sm-st-info span {
        display: block;
        font-size: 24px;
        font-weight: 600;
    }

    .orange {
        background: #fa8564 !important;
    }

    .tar {
        background: #45cf95 !important;
    }

    .sm-st .green {
        background: #86ba41 !important;
    }

    .pink {
        background: #AC75F0 !important;
    }

    .yellow-b {
        background: #fdd752 !important;
    }

    .stat-elem {

        background-color: #fff;
        padding: 18px;
        border-radius: 40px;

    }

    .stat-info {
        text-align: center;
        background-color: #fff;
        border-radius: 5px;
        margin-top: -5px;
        padding: 8px;
        -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        font-style: italic;
    }

    .stat-icon {
        text-align: center;
        margin-bottom: 5px;
    }

    .st-red {
        background-color: #F05050;
    }

    .st-green {
        background-color: #27C24C;
    }

    .st-violet {
        background-color: #7266ba;
    }

    .st-blue {
        background-color: #23b7e5;
    }

    .stats .stat-icon {
        color: #28bb9c;
        display: inline-block;
        font-size: 26px;
        text-align: center;
        vertical-align: middle;
        width: 50px;
        float: left;
    }

    .stat {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .stat .value {
        font-size: 20px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }

    .stat .name {
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 5px 0;
    }

    .stat.lg .value {
        font-size: 26px;
        line-height: 28px;
    }

    .stat-col {
        margin:0 0 10px 0;
    }
    .stat.lg .name {
        font-size: 16px;
    }

    .stat-col .progress {
        height: 2px;
    }

    .stat-col .progress-bar {
        line-height: 2px;
        height: 2px;
    }

    .item {
        padding: 30px 0;
    }


    #statistics .panel {
        min-height: 150px;
    }

    #statistics .panel h5 {
        font-size: 14px;
    }
</style>

<script src="/assets/libs/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

<script src="/assets/js/echarts.min.js"></script>
<script src="/assets/js/echarts-theme.js"></script>
<script src="/assets/js/china.js"></script>

<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null, false)}
        <h1>{$config_info.title}</h1>
        <h2>短链：{$config_info.short_url}</h2>
        <h3>原链接：{$config_info.orginal_url}</h3>
        <input type="text" id="date-range" class="form-control datetimerange" style="width: 400px;height: 38px;margin-left: 200px;" placeholder="选择日期">

        <ul class="nav nav-tabs">
            <li class="active"><a href="#one" data-toggle="tab">数据图标</a></li>
            <li><a href="#two" data-toggle="tab">访问记录</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="row">
                    <div class="col-sm-2 col-xs-4">
                        <div class="sm-st clearfix">
                            <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span>
                            <div class="sm-st-info">
                                <span id="a1">{$times_today}</span>
                                访问次数
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2 col-xs-4">
                        <div class="sm-st clearfix">
                            <span class="sm-st-icon st-violet"><i class="fa fa-magic"></i></span>
                            <div class="sm-st-info">
                                <span id="a2">{$users_today}</span>
                                访问人数
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2 col-xs-4">
                        <div class="sm-st clearfix">
                            <span class="sm-st-icon st-blue"><i class="fa fa-leaf"></i></span>
                            <div class="sm-st-info">
                                <span id="a3">{$ips_today}</span>
                                ip数
                            </div>
                        </div>
                    </div>


                </div>
                <!--访问趋势-->
                <div class="row">
                    <div class="col-lg-12">
                        <div id="echart" class="btn-refresh" style="height:600px;width:100%;"></div>
                    </div>
                </div>
                <!--24小时分布-->
                <div class="row">
                    <div class="col-lg-12">
                        <div id="echart2" class="btn-refresh2" style="height:500px;width:100%;"></div>
                    </div>
                </div>
                <!--全国地图分布----高频IP-->
                <div class="row">
                    <div class="col-lg-7">
                        <div id="echart4" class="btn-refresh4" style="height:600px;width:100%;"></div>
                    </div>
                    <div class="col-lg-5">
                        <div style="height:600px;width:100%;">
                            <div><h2>高频IP</h2></div>
                            <div style="margin-top: 30px;margin-left: 30px;">
                                <ul class="list-group">
                                    {foreach $most_ip as $key=>$vo }
                                    <li class="list-group-item">
                                        <span class="badge">{$vo}次</span>
                                        {$key}
                                    </li>
                                    {/foreach}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="two">
                <div class="row">
                    <div class="col-xs-12">
                        <div>
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>时间</th>
                                        <th>IP</th>
                                        <th>省</th>
                                        <th>市</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {volist name='list' id='static'}
                                        <tr>
                                            <td> {$static.createtime|date='y-m-d h:i:s',###}</td>
                                            <td> {$static.ip}</td>
                                            <td> {$static.province}</td>
                                            <td> {$static.city}</td>
                                        </tr>
                                    {/volist}
                                </tbody>
                            </table>
                        </div>
<!--                        {$list->render()}-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" name="config_id" id="config_id" value="{$config_id}">
<input type="hidden" name="group_id" id="group_id" value="{$group_id}">

<script>
     //时间区间
     var date_range = '<?php echo json_encode($date_range);?>';
     var date_range_obj=eval('('+date_range+')');
     //访问次数
     var times_30 = '<?php echo json_encode($times_30);?>';
     var times_30_obj=eval('('+times_30+')');
     //访问人数
     var users_30 = '<?php echo json_encode($users_30);?>';
     var users_30_obj=eval('('+users_30+')');
     //访问IP数
     var times_24 = '<?php echo json_encode($times_24);?>';
     var times_24_obj=eval('('+times_24+')');

     //访问IP数
     var ips_30 = '<?php echo json_encode($ips_30);?>';
     var ips_30_obj=eval('('+ips_30+')');

     //地区分布
     var area_34 = '<?php echo json_encode($area_34);?>';
     var area_34_obj=eval('('+area_34+')');


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart'), 'walden');
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '访问曲线'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['访问次数', '访问人数', '访问 IP 数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date_range_obj
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '访问次数',
                type: 'line',
                stack: 'Total',
                data: times_30_obj
            },
            {
                name: '访问人数',
                type: 'line',
                stack: 'Total',
                data: users_30_obj
            },
            {
                name: '访问 IP 数',
                type: 'line',
                stack: 'Total',
                data: ips_30_obj
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $(window).resize(function () {
        myChart.resize();
    });
    $(document).on("click", ".btn-refresh", function () {
        setTimeout(function () {
            myChart.resize();
        }, 0);
    });


    var myChart2 = echarts.init(document.getElementById('echart2'), 'walden');
    var option2 = {
        title : {
            text: '24小时分布',
        },
        tooltip : {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: ['0','1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: times_24_obj,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };
    myChart2.setOption(option2);
    $(window).resize(function () {
        myChart2.resize();
    });
    $(document).on("click", ".btn-refresh2", function () {
        setTimeout(function () {
            myChart2.resize();
        }, 0);
    });

    var myChart4 = echarts.init(document.getElementById('echart4'),'emphasis');
    var option4 = {
        title : {
            text: '访问地区分布',
            subtext: '',
        },
        tooltip : {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            x:'left',
            data:['访问次数']
        },
        dataRange: {
            x: 'left',
            y: 'bottom',
            splitList: [
                {start: 500},
                {start: 300, end: 500},
                {start: 100, end: 300},
                {start: 50, end: 100},
                {start: 10, end: 50},
                {start: 0, end: 10 },
                {end: 0}
            ],
            color: ['#E0022B', '#E09107', '#A3E00B']
        },
        toolbox: {
            show: true,
            orient : 'vertical',
            x: 'right',
            y: 'center',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        roamController: {
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        geo: {
            // 这个是重点配置区
            map: "china", // 表示中国地图

        },
        series : [
            {
                name: '下载量',
                type: 'map',
                mapType: 'china',
                roam: false,
                itemStyle:{
                    normal:{
                        label:{
                            show:true,
                            textStyle: {
                                color: "rgb(249, 249, 249)"
                            }
                        }
                    },
                    emphasis:{label:{show:true}}
                },
                data:area_34_obj
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart4.setOption(option4);
</script>


<script>
    $(document).ready(function () {
        $("#date-range").daterangepicker({
            "showDropdowns": true,
            "showISOWeekNumbers": true,
            "ranges": {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '近一周': [moment().subtract(6, 'days'), moment()],
                '近一个月': [moment().subtract(29, 'days'), moment()],
                '本月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            "locale": {
                "format": "YYYY/MM/DD",
                "separator": " - ",
                "applyLabel": "确定",
                "cancelLabel": "取消",
                "fromLabel": "从",
                "toLabel": "到",
                "customRangeLabel": "自定义",
                "weekLabel": "周",
                "daysOfWeek": [
                    "日",
                    "一",
                    "二",
                    "三",
                    "四",
                    "五",
                    "六"
                ],
                "monthNames": [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月"
                ],
                "firstDay": 1
            },
            "alwaysShowCalendars": true,
            "startDate": moment().subtract(0, 'days'),
            "endDate": moment(),
            "linkedCalendars": false,
        }, function (start, end, label) {
            var start_date = start.format('YYYY-MM-DD');
            var end_date = end.format('YYYY-MM-DD');
            var config_id = $("#config_id").val();
            var group_id = $("#group_id").val();
            $.post({
                async:true,
                url: "short/chain/data/get_data_by_range",
                data:{'daterange':start_date+' - '+end_date,'config_id':config_id,'group_id':group_id},
                success: function(res3){
                    $("#a1").html(res3.times_today);
                    $("#a2").html(res3.users_today);
                    $("#a3").html(res3.ips_today);
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('echart'), 'walden');
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '访问曲线'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['访问次数', '访问人数', '访问 IP 数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res3.date_range
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '访问次数',
                                type: 'line',
                                stack: 'Total',
                                data: res3.times_30
                            },
                            {
                                name: '访问人数',
                                type: 'line',
                                stack: 'Total',
                                data: res3.users_30
                            },
                            {
                                name: '访问 IP 数',
                                type: 'line',
                                stack: 'Total',
                                data: res3.ips_30
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    $(window).resize(function () {
                        myChart.resize();
                    });
                    $(document).on("click", ".btn-refresh", function () {
                        setTimeout(function () {
                            myChart.resize();
                        }, 0);
                    });


                    var myChart2 = echarts.init(document.getElementById('echart2'), 'walden');
                    var option2 = {
                        title : {
                            text: '24小时分布',
                        },
                        tooltip : {
                            trigger: 'item'
                        },
                        xAxis: {
                            type: 'category',
                            data: ['0','1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: res3.times_24,
                                type: 'bar',
                                showBackground: true,
                                backgroundStyle: {
                                    color: 'rgba(180, 180, 180, 0.2)'
                                }
                            }
                        ]
                    };
                    myChart2.setOption(option2);
                    $(window).resize(function () {
                        myChart2.resize();
                    });
                    $(document).on("click", ".btn-refresh2", function () {
                        setTimeout(function () {
                            myChart2.resize();
                        }, 0);
                    });

                    var myChart4 = echarts.init(document.getElementById('echart4'),'emphasis');
                    var option4 = {
                        title : {
                            text: '访问地区分布',
                            subtext: '',
                        },
                        tooltip : {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            x:'left',
                            data:['访问次数']
                        },
                        dataRange: {
                            x: 'left',
                            y: 'bottom',
                            splitList: [
                                {start: 500},
                                {start: 300, end: 500},
                                {start: 100, end: 300},
                                {start: 50, end: 100},
                                {start: 10, end: 50},
                                {start: 0, end: 10 },
                                {end: 0}
                            ],
                            color: ['#E0022B', '#E09107', '#A3E00B']
                        },
                        toolbox: {
                            show: true,
                            orient : 'vertical',
                            x: 'right',
                            y: 'center',
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        roamController: {
                            show: true,
                            x: 'right',
                            mapTypeControl: {
                                'china': true
                            }
                        },
                        geo: {
                            // 这个是重点配置区
                            map: "china", // 表示中国地图

                        },
                        series : [
                            {
                                name: '下载量',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle:{
                                    normal:{
                                        label:{
                                            show:true,
                                            textStyle: {
                                                color: "rgb(249, 249, 249)"
                                            }
                                        }
                                    },
                                    emphasis:{label:{show:true}}
                                },
                                data:res3.area_34
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart4.setOption(option4);
                }
            });
        });

    });
</script>
